<script setup>
import { ref, computed } from 'vue';

const couponList = ref([
    { id: 0, title: "来杯冯老师特制冰美式兑换券", effective_date: '2025-07-20', image: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png' },
    { id: 1, title: "来杯冯老师特制冰美式兑换券", effective_date: '2025-07-20', image: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png' }
]);
</script>
<template>
    <view class="coupon-container">
        <view class="[coupon-box,box-container]" v-for="item in  couponList " :key="item.id">
            <view class="left">
                <view class="title">{{ item.title }}</view>
                <view class="date">有效期至{{ item.effective_date }}</view>
                <view class="exchange">兑换</view>
            </view>
            <view class="right">
                <image :src="item.image" mode=""></image>
            </view>

        </view>
        <view style="height: 100px;"></view>


    </view>
</template>



<style lang="scss" scoped>
.coupon-container {
    width: 100%;
    height: 100vh;
    background-color: #f6f7f8 !important;
    overflow-y: scroll;

    //每个box的装饰
    .box-container {
        width: 90%;
        background-color: white;
        border-radius: 32rpx;
        margin: 20rpx auto;
        padding: 20rpx;
    }

    .coupon-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            width: 400rpx;

            .title {
                font-weight: 600;
            }

            .date {
                font-size: 28rpx;
                color: #858585;
                padding: 10rpx 0;
            }

            .exchange {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100rpx;
                font-size: 28rpx;
                background-color: #c07f58;
                padding: 10rpx;
                border-radius: 32rpx;
                margin-top: 40rpx;
            }
        }

        .right {
            width: calc(100% - 500rpx);
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

    }


}
</style>